<#assign base=rc.contextPath />
<!DOCTYPE html>
<html lang="en">
<head>
    <base id="base" href="${base}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>驴妈妈统计系统</title>
    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" href="${base}/assets/css/bootstrap.min.css"/>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="${base}/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="${base}/assets/css/fonts.googleapis.com.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="${base}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="${base}/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="${base}/assets/css/ace-rtl.min.css" />
    <!-- ace settings handler -->
    <link rel="stylesheet" href="${base}/assets/css/bsie-paginator.css" />
    <link rel="stylesheet"  href="${base}/stylesheets/daterangepicker.css">

    <link rel="stylesheet" href="${base}/assets/css/bootstrap.css" />
    <link rel="stylesheet" href="${base}/stylesheets/loading.css" />
    <link rel="stylesheet" href="${base}/stylesheets/tips.css" />

    <script src="${base}/assets/js/jquery.2.1.1.min.js"></script>

    <style>
        th{text-align: center;}
        .productName{cursor: pointer;}
        button{height:30px;}
    </style>

    <script>
        //设置选择的时间
        var selectTime = function(selectedTime){
            $('#selectedTime').val(selectedTime);
        };
    </script>
</head>

<body class="skin-2" style="background-color: #FFF;">
<input type="hidden" id="flag" value="${query.flag!}">
<input type="hidden" id="returnUrl" value="${query.returnUrl!}">
<#if query.flag??>
    <#if query.flag =='1'>
        <ul class="pager">
            <li class="previous">
                <a href="${query.returnUrl!}">← 返回</a>
            </li>
        </ul>
    </#if>
</#if>
<!--评价排序table-->
<div class="tabbable">
    <div class="tab-content">
        <div id="manage" class="tab-pane active in">
            <div class="row">
                <div class="col-xs-12">
                    <!-- 筛选条件开始 -->
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h4 class="widget-title">产品点评列表</h4>
                                </div>
                                <div class="widget-body" style="background-color: #EFF3F8;">
                                    <div class="widget-main">
                                        <form class="form-inline" id="searchForm" method="post" action="#">
                                            <div class="form-group">
                                                <label>选择时段
                                                    <input type="text" style="height: 30px; font-size: 14px; font-weight: normal; font-family: inherit;" name="chooseTime" value="${chooseTime!''}" id="chooseTime" class="form-control time">
                                                    <input type="hidden" id="selectedTime" value="">
                                                    <button type="button" id="dayBtn" onclick="replaceDate(this,'1');selectTime('1');" class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        	昨日
                                                    </button>
                                                    <button type="button" id="weekBtn" onclick="replaceDate(this,'7');selectTime('7');" class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                   	              过去7天
                                                    </button>
                                                    <button type="button" id="monthBtn" onclick="replaceDate(this,'31');selectTime('31');" class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                     	   过去31天
                                                    </button>
                                                </label>
                                                <label style="margin-left: 15px;">产品ID
                                                    <input type="text" id="product_id" style="width: 120px;" name="product_id" value="<#if query.productId??>${query.productId}</#if>" placeholder="输入产品ID">
                                                </label>
                                                <label style="padding-left: 15px;">品类
                                                    <select class="chosen-select" data-placeholder="" id="categoryId" >
                                                        <#list categories as cate>
                                                            <option value="${cate.value}" <#if query.categoryId?? && cate.value==query.categoryId>selected</#if>>${cate.showName!""}</option>
                                                        </#list>
                                                    </select>
                                                </label>
                                                <button id="productSearch" type="button" class="btn btn-pink btn-sm"  style="margin-left: 50px;">
                                                    <span class="ace-icon fa fa-search icon-on-right bigger-110"></span> Search
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 筛选条件结束 -->
                    <div style="color:#de6a57;height:30px;padding-top: 5px;">*注：红色代表差评率高于10%</div>
                    <div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
                        <input type="hidden" id="orderBy" value="${query.orderBy!"good desc"}">
                    	<table id="commentTable" class="table table-bordered table-striped" aria-describedby="dynamic-table_info">
                            <thead>
                                <tr>
                                    <th style="width:80px;">产品ID</th>
                                    <th style="width:120px;">所属品类</th>
                                    <th>产品名称</th>
                                    <th style="width:100px;">点评总数(条)</th>
                                    <th style="width:75px;" attr="good" class="sortingProduct <#if (query.orderBy!"default")=="good desc">sorting_desc<#elseif (query.orderBy!"default")=="good asc">sorting_asc<#else>sorting</#if>">好评率</th>
                                    <th style="width:75px;" attr="medium" class="sortingProduct <#if (query.orderBy!"default")=="medium desc">sorting_desc<#elseif (query.orderBy!"default")=="medium asc">sorting_asc<#else>sorting</#if>">中评率</th>
                                    <th style="width:75px;" attr="bad" class="sortingProduct <#if (query.orderBy!"default")=="bad desc">sorting_desc<#elseif (query.orderBy!"default")=="bad asc">sorting_asc<#else>sorting</#if>">差评率</th>
                                    <th style="width:80px;">观点提取</th>
                                </tr>
                            </thead>
                            <tbody class="product_tr">
                                <#list productRankPage.list as proList>
                                    <tr class="productName" onclick="showDetail('${proList.productName?replace("\"", "")}', this, '${proList.productId!}', ${proList.good!}, ${proList.medium!}, ${proList.bad!});">
                                        <td>${proList.productId!}</td>
                                        <td>${proList.categoryName!}</td>
                                        <td>${proList.productShortName?replace("\"", "")}</td>
                                        <td>${proList.productCommentCount!}</td>
                                        <td>${proList.good!}%</td>
                                        <td>${proList.medium!}%</td>
                                        <td> <div <#if (proList.bad>10)>style="background-color: #de6a57;width: 100%;height: 22px;color: #fff;"</#if>>${proList.bad!}%</div></td>
                                        <td><div class="ui-pg-div"><a href="javascript:void(0)" onclick="test(event,'${proList.productName?replace("\"", "")}','${proList.productId!}');"><i class="ace-icon fa fa-hand-o-right" style="color: #C6487E;"></i></a></div></td>
                                    </tr>
                                </#list>
                                <#if (productRankPage.total <= 0) >
                                    <tr><td colspan="8"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>
                                </#if>
                            </tbody>
                        </table>

                        <!-- 分页 -->
                        <#if (productRankPage.total>10) >
                            <div class="ui-jqgrid">
                                <div id="grid-pager"
                                     class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
                                     dir="ltr">
                                    <div id="pg_grid-pager" class="ui-pager-control" role="group">
                                        <table class="ui-pg-table" style="width: 100%; table-layout: fixed; height: 100%;" cellspacing="0" cellpadding="0" border="0" role="row">
                                            <tbody>
                                                <tr>
                                                    <td id="grid-pager_left" align="left"></td>
                                                    <td id="grid-pager_center" align="center" style="white-space: pre; width: 343px;"><table cellspacing="0" cellpadding="0" border="0" style="table-layout: auto;" class="ui-pg-table"><tbody><tr>
                                                        <td id="first_grid-pager" <#if productRankPage.pageNum!=1>onclick="showPage('1')"</#if>
                                                        class="ui-pg-button ui-corner-all <#if productRankPage.pageNum==1>ui-state-disabled</#if>"
                                                        <#if productRankPage.pageNum!=1>style="cursor: pointer;"</#if>><span
                                                            class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
                                                        <td id="prev_grid-pager" <#if productRankPage.pageNum!=1>onclick="showPage('${productRankPage.prePage}')"</#if>
                                                        class="ui-pg-button ui-corner-all <#if productRankPage.pageNum==1>ui-state-disabled</#if>"
                                                        <#if productRankPage.pageNum!=1>style="cursor: pointer;"</#if>><span
                                                            class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
                                                        <td dir="ltr">Page <input class="ui-pg-input" id="page_num"
                                                                                  type="text" size="2" maxlength="7" disabled="true" value="${productRankPage.pageNum}" role="textbox"> of <span
                                                                id="sp_1_grid-pager">${productRankPage.pages}</span></td>
                                                        <td id="next_grid-pager" <#if productRankPage.pageNum!=productRankPage.pages>onclick="showPage('${productRankPage.nextPage}')"</#if>
                                                        class="ui-pg-button ui-corner-all <#if productRankPage.pageNum==productRankPage.pages>ui-state-disabled</#if>"
                                                        <#if productRankPage.pageNum!=productRankPage.pages>style="cursor: pointer;"</#if>><span
                                                            class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
                                                        <td id="last_grid-pager" <#if productRankPage.pageNum!=productRankPage.pages>onclick="showPage('${productRankPage.pages}')"</#if>
                                                        class="ui-pg-button ui-corner-all <#if productRankPage.pageNum==productRankPage.pages>ui-state-disabled</#if>"
                                                        <#if productRankPage.pageNum!=productRankPage.pages>style="cursor: pointer;"</#if>><span
                                                            class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
                                                    </tr></tbody></table></td>
                                                    <td id="grid-pager_right" align="right">
                                                        <div dir="ltr" style="text-align: right" class="ui-paging-info">View
                                                            <span id="view_start_row">${productRankPage.startRow}</span> - <span id="view_end_row">${productRankPage.endRow}</span>
                                                            of <span id="view_page_total">${productRankPage.total}</span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- 分页结束 -->
                        </#if>
                    </div>
                </div>
            </div>
		</div>
        <div id="product_detail" style="display: none;">
            <div class="row" style="padding-top: 5px;" id="pit_title">
                <div class="col-xs-12">
                    <div class="widget-box">
                        <div class="widget-header widget-header-small">
                            <h4 class="widget-title"><span class="proname"></span>满意度分析</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6" id="lineChartDiv">
                    <div class="widget-box">
                        <div class="widget-header widget-header-small">
                            <h4 style="color:#000;"><span>满意度趋势</span>
                                <label class="help_img">
                                    <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
                                    <span class='tips'>一段时间内<span class="proname"></span>满意度趋势<s></s></span>
                                </label>
                            </h4>
                        </div>
                        <div class="widget-body" style="height: 350px;">
                            <div id="lineChart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6"  style="padding-left: 0px!important;" id="pieChartDiv">
                    <div  class="widget-box">
                        <div class="widget-header widget-header-small">
                            <h4 style="color:#000;"><span>满意度占比</span>
                                <label class="help_img">
                                    <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
                                    <span class='tips'>一段时间内<span class="content_name">满意度所占比例</span><s></s></span>
                                </label>
                            </h4>
                        </div>
                        <div class="widget-body" style="height: 350px;">
                            <div id="pieChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${base}/assets/js/jquery-2.1.4.min.js"></script>
<script src="${base}/assets/js/ace-extra.min.js"></script>
<script src="${base}/assets/js/user/base.js"></script>
<script src="${base}/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="${base}/assets/js/jquery-ui.min.js"></script>
<script src="${base}/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="${base}/assets/js/moment.min.js"></script>
<script src="${base}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="${base}/assets/js/daterangepicker.min.js"></script>
<!-- ace scripts -->
<script src="${base}/assets/js/ace-elements.min.js"></script>
<script src="${base}/assets/js/ace.min.js"></script>

<script src="${base}/assets/js/jquery-ui.custom.min.js"></script>
<script src="${base}/assets/js/bootbox.min.js"></script>
<script src="${base}/assets/js/spin.min.js"></script>
<script src="${base}/assets/js/ace-elements.min.js"></script>
<script src="${base}/assets/js/ace.min.js"></script>
<script src="${base}/assets/js/bootstrapValidator.min.js"></script>

<script type="text/javascript" src="${base}/javascripts/moment.js"></script>
<script type="text/javascript" src="${base}/javascripts/loading.js"></script>
<script type="text/javascript" src="${base}/javascripts/daterangepicker.js"></script>
<script type="text/javascript" src="${base}/assets/js/comment/dateSelector.js"></script>
<script src="${base}/assets/js/jquery.gritter.min.js"></script>
<script type="text/javascript" src="${base}/javascripts/g2.js"></script>
<script type="text/javascript" src="${base}/javascripts/g2-modal.js"></script>
<script type="text/javascript" src="${base}/javascripts/slider.js"></script>
<script src="${base}/assets/js/chosen.jquery.js"></script>
<script src="${base}/javascripts/d3.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>		
<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>
<script>var initSelectedTime = "${query.selectedTime!""}";var chooseTime = "${chooseTime!""}";</script>
<!--产品评价分析js-->
<script src="${base}/assets/js/comment/productAnalysis.js"></script>
</body>
</html>